<template>
  <div class="fm-page">
    <van-nav-bar title="私人FM" left-arrow @click-left="$router.back()" />
    <div class="section-title">为你推荐的FM</div>
    <div class="fm-list">
      <div class="fm-item" v-for="item in fmList" :key="item.id">
        <img :src="item.cover" class="fm-cover" />
        <div class="fm-info">
          <div class="fm-title">{{ item.title }}</div>
          <div class="fm-desc">{{ item.desc }}</div>
          <div class="fm-meta">
            <span class="fm-host">主播：{{ item.host }}</span>
            <span class="fm-type">{{ item.type }}</span>
            <span class="fm-play">{{ item.playCount }}次播放</span>
          </div>
        </div>
      </div>
    </div>
    <div class="section-title">猜你喜欢的FM</div>
    <div class="fm-list">
      <div class="fm-item" v-for="item in guessList" :key="item.id">
        <img :src="item.cover" class="fm-cover" />
        <div class="fm-info">
          <div class="fm-title">{{ item.title }}</div>
          <div class="fm-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const fmList = ref([
  { id: 1, title: '深夜电台', desc: '治愈你的夜晚', host: '小夜', type: '情感FM', playCount: 12345, cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 2, title: '清晨FM', desc: '唤醒美好一天', host: '晨曦', type: '清晨FM', playCount: 8888, cover: 'https://imge.kugou.com/stdmusic/20240427/20240427191301775727.jpg' },
  { id: 3, title: '经典老歌', desc: '回忆杀', host: '老王', type: '怀旧FM', playCount: 6666, cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 4, title: '音乐故事', desc: '每首歌背后的故事', host: '音乐人', type: '故事FM', playCount: 5432, cover: 'https://img0.baidu.com/it/u=2030267494,2401277417&fm=253&app=138&f=JPEG?w=817&h=800' },
  { id: 5, title: '爵士时光', desc: '慵懒的爵士时光', host: '爵士猫', type: '爵士FM', playCount: 4321, cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 6, title: '古典音乐', desc: '经典古典音乐', host: '古典大师', type: '古典FM', playCount: 3210, cover: 'https://img2.baidu.com/it/u=147936358,2816222157&fm=253&app=138&f=JPEG?w=813&h=800' },
  { id: 7, title: '电音派对', desc: '动感电音舞曲', host: '电音DJ', type: '电音FM', playCount: 2109, cover: 'https://img0.baidu.com/it/u=3315620404,701141190&fm=253&app=138&f=JPEG?w=834&h=800' },
  { id: 8, title: '民谣时光', desc: '温暖民谣歌曲', host: '民谣小王子', type: '民谣FM', playCount: 1098, cover: 'https://pic4.zhimg.com/v2-5b9de1d48ee943f3c8fde04035a58bd5_r.jpg' }
])
const guessList = ref([
  { id: 9, title: '夜色温柔', desc: '陪你入眠', cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2eb4c842-eadd-400e-a92a-74bb8e49b6a0%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754447781&t=d2a488a450bfc53eccc758cc0adba1c8' },
  { id: 10, title: '午后阳光', desc: '温暖你的心', cover: 'https://img2.baidu.com/it/u=1858292141,3587727348&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
  { id: 11, title: '咖啡时光', desc: '咖啡配音乐', cover: 'https://img1.baidu.com/it/u=4050763066,3874124631&fm=253&app=120&f=JPEG?w=1422&h=800' },
  { id: 12, title: '旅行音乐', desc: '路上的音乐', cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6d78747e-249e-48ff-8a7a-faad802c539c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754447781&t=ceead7f8ae224222240f28d32b768d0c' },
  { id: 13, title: '工作音乐', desc: '专注工作时光', cover: 'https://imge.kugou.com/stdmusic/20220507/20220507113657285312.jpg' },
  { id: 14, title: '运动音乐', desc: '动感运动时光', cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fca40d6d8-a3b6-46e9-bcde-b4921fbb242a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754447781&t=10ba78ceef3946462699a793ee042893' }
])
</script>
<style scoped>
.fm-page { background: var(--van-background-color, #fff); min-height: 100vh; color: var(--van-text-color, #222); }
.section-title { font-weight: bold; margin: 18px 0 8px 16px; font-size: 15px; }
.fm-list { padding: 0 16px; }
.fm-item { display: flex; align-items: center; margin-bottom: 16px; }
.fm-cover { width: 48px; height: 48px; border-radius: 8px; margin-right: 12px; }
.fm-title { font-weight: bold; font-size: 15px; }
.fm-desc { color: #888; font-size: 13px; margin: 2px 0; }
.fm-meta { font-size: 12px; color: #aaa; display: flex; gap: 10px; }
</style> 